<template>
  <div>
    <publicNav></publicNav>
    <indexBanner></indexBanner>
    <ul>
      <li v-for="(item, index) in indexCenters" :key="index">
        <h2>{{item.title}}</h2>
        <p>{{item.scdTitle}}</p>
        <div class="img-box">
          <img :src="item.imgSrc" :alt="item.title">
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import publicNav from '@/components/publicNav.vue'
import indexBanner from '@/components/indexBanner.vue'

export default {
  name: 'home',
  data() {
    return {
      indexCenters:[{
        title:'艺术作品',
        scdTitle:'油画|素描|水彩|水粉|国画',
        imgSrc:require("@/assets/images/center_1@2x.png")
      },{
        title:'艺术衍生品',
        scdTitle:'T恤|POLO衫|卫衣|背包|抱枕',
        imgSrc:require("@/assets/images/center_2@2x.png")
      },{
        title:'我要创作',
        scdTitle:'',
        imgSrc:require("@/assets/images/center_3@2x.png")
      }]
    }
  },
  components: {
    publicNav,indexBanner
  }
}
</script>
<style scoped>
  ul li{
    display: block;
    margin:0 auto;
    text-align: center;
  }
  li h2{
    position: relative;
    display: inline;
    font-size:34px;
    font-family:PingFang-SC;
    font-weight:bold;
    color:rgba(10,10,10,1);
    line-height:48px;
  }
  li h2::before{
    content: '';
    position: absolute;
    width:100%;
    height:6px;
    background:linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(208,19,28,1) 100%);
    left:0;
    bottom:0;
    z-index: -1;
  }
  li p{
    font-size:24px;
    font-family:PingFang-SC;
    font-weight:500;
    color:rgba(102,102,102,1);
    line-height:33px;
    letter-spacing:2px;
  }
  li .img-box{
    display: block;
    width:520px;
    height:390px;
    margin:15px auto;
  }
  li .img-box img{
    width:100%;
    height:100%;
  }
</style>
